<template>
  <div class="selectdate-container">
    <!-- 头部 -->
    <div class="header">
		 <div class="back-btn" @click="goBack">←</div>
      <h1>选择体检日期</h1>
    </div>
    
    <!-- 月份选择器 -->
    <div class="month-selector">
      <button class="nav-btn prev-month" @click="prevMonth">‹</button>
      
      <div class="month-year-selector">
        <div class="select-box">
          <select v-model="selectedYear" @change="generateCalendar">
            <option v-for="year in years" :key="year" :value="year">{{ year }}年</option>
          </select>
        </div>
        
        <div class="select-box">
          <select v-model="selectedMonth" @change="generateCalendar">
            <option v-for="(month, index) in months" :key="index" :value="index">{{ month }}</option>
          </select>
        </div>
      </div>
      
      <button class="nav-btn next-month" @click="nextMonth">›</button>
    </div>
    
    <!-- 日历部分 -->
    <div class="calendar">
      <div class="weekdays">
        <div v-for="day in weekdays" :key="day">{{ day }}</div>
      </div>
      
      <div class="days">
        <div 
          v-for="(day, index) in calendarDays" 
          :key="index"
          :class="['day', day.type, { selected: day.date === selectedDate }]"
          @click="selectDate(day)"
        >
          <div>{{ day.display }}</div>
          <div class="quota" v-if="day.quota">{{ day.quota }}</div>
        </div>
      </div>
    </div>
    
    <!-- 下一步按钮 -->
    <button class="next-btn" @click="nextStep" :disabled="!selectedDate">下一步</button>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
      <div class="nav-item" :class="{ active: currentNav === 'hospital' }">
        <span class="nav-icon">🏥</span>
        <span class="nav-text">云医院</span>
      </div>
      <div class="nav-item" :class="{ active: currentNav === 'mall' }">
        <span class="nav-icon">🛒</span>
        <span class="nav-text">商城</span>
      </div>
      <div class="nav-item" :class="{ active: currentNav === 'discover' }">
        <span class="nav-icon">🔍</span>
        <span class="nav-text">发现</span>
      </div>
      <div class="nav-item" :class="{ active: currentNav === 'personal' }" @click="goToPersonal">
        <span class="nav-icon">👤</span>
        <span class="nav-text">我</span>
      </div>
    </div>
     </div>
</template>

<script>
export default {
  name: 'Calendar',
  data() {
    const currentDate = new Date();
    
    return {
      selectedDate: null,
      currentNav: 3,
      navItems: ['云医院', '商城', '发现', '我'],
      weekdays: ['日', '一', '二', '三', '四', '五', '六'],
      calendarDays: [],
      selectedYear: currentDate.getFullYear(),
      selectedMonth: currentDate.getMonth(),
      months: [
        '1月', '2月', '3月', '4月', '5月', '6月',
        '7月', '8月', '9月', '10月', '11月', '12月'
      ]
    }
  },
  computed: {
    years() {
      const currentYear = new Date().getFullYear();
      const yearsList = [];
      for (let i = currentYear - 5; i <= currentYear + 5; i++) {
        yearsList.push(i);
      }
      return yearsList;
    }
  },
  mounted() {
    this.generateCalendar();
  },
  methods: {
    generateCalendar() {
      this.calendarDays = [];
      
      // 获取当月第一天和最后一天
      const firstDay = new Date(this.selectedYear, this.selectedMonth, 1);
      const lastDay = new Date(this.selectedYear, this.selectedMonth + 1, 0);
      
      // 获取当月第一天是星期几（0=周日, 1=周一, ..., 6=周六）
      const firstDayOfWeek = firstDay.getDay();
      
      // 生成空日期（上个月的日期）
      for (let i = 0; i < firstDayOfWeek; i++) {
        this.calendarDays.push({
          display: '',
          type: 'empty',
          date: null,
          quota: ''
        });
      }
      
      // 生成当月日期
      for (let i = 1; i <= lastDay.getDate(); i++) {
        let type = 'normal';
        let quota = '';
        
        // 设置18号及以后为橙色（仅对当前月有效）
        const today = new Date();
        if (this.selectedYear === today.getFullYear() && 
            this.selectedMonth === today.getMonth() && 
            i >= 18) {
          type = 'orange';
        }
        
        // 设置特定日期的余号信息（仅对当前月有效）
        if (this.selectedYear === today.getFullYear() && 
            this.selectedMonth === today.getMonth()) {
          if (i === 18) quota = '余56';
          if (i === 19) quota = '余66';
          if (i === 20) quota = '余123';
          if (i === 21) quota = '余178';
          if (i === 22) quota = '余200';
          if (i >= 23 && i <= 29) quota = '余200';
          if (i === 30 || i === 31) quota = '余200';
        }
        
        // 格式化日期
        const formattedDate = `${this.selectedYear}-${(this.selectedMonth + 1).toString().padStart(2, '0')}-${i.toString().padStart(2, '0')}`;
        
        this.calendarDays.push({
          display: i,
          type: type,
          date: formattedDate,
          quota: quota
        });
      }
    },
    
    selectDate(day) {
      if (day.type !== 'empty') {
        this.selectedDate = day.date;
      }
    },
    methods: {
      goBack() {
        this.$router.back()
      }
    },
    nextStep() {
      if (this.selectedDate) {
        alert(`您选择了 ${this.selectedDate}，即将进入下一步`)
		this.$router.push('/appointmentsuccess')
      } else {
        alert('请先选择体检日期');
      }
    },
    
    selectNav(index) {
      this.currentNav = index;
    },
    
    prevMonth() {
      if (this.selectedMonth === 0) {
        this.selectedMonth = 11;
        this.selectedYear--;
      } else {
        this.selectedMonth--;
      }
      this.generateCalendar();
    },
    
    nextMonth() {
      if (this.selectedMonth === 11) {
        this.selectedMonth = 0;
        this.selectedYear++;
      } else {
        this.selectedMonth++;
      }
      this.generateCalendar();
    }
  }
}

  
 


</script>

<style scoped>
.selectdate-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 60px;
}

.header {
  background: white;
  padding: 15px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header h1 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.back-btn {
  font-size: 20px;
  margin-right: 8px;
}

/* 月份选择器样式 */
.month-selector {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}

.nav-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
 color: #4a90e2;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.nav-btn:hover {
  background-color: #f0f0f0;
}

.month-year-selector {
  display: flex;
  gap: 10px;
}

.select-box {
  position: relative;
  display: inline-block;
}

.select-box select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 8px 30px 8px 12px;
  border: 1px solid ;
  border-radius: 4px;
  background-color: white;
  font-size: 16px;
  cursor: pointer;
}

.select-box::after {
  content: "▼";
  font-size: 12px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #666;
}

/* 日历样式 */
.calendar {
  padding: 20px;
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 10px;
  color: #888;
  font-size: 14px;
}

.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}

.day {
  text-align: center;
  padding: 12px 0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.day.empty {
  background-color: transparent;
  cursor: default;
}

.day.normal {
  background-color: #f8f8f8;
}

.day.orange {
  background-color: #ff7b2c;
  color: white;
  font-weight: 600;
}

.day.orange:hover {
  background-color: #ff6a0d;
}

.day.normal:hover {
  background-color: #eaeaea;
}

.day.selected {
  background-color: #4a90e2;
  color: white;
}

.day .quota {
  font-size: 10px;
  margin-top: 4px;
}

/* 下一步按钮样式 */
.next-btn {
  display: block;
  width: 90%;
  margin: 10px auto;
  padding: 14px;
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

.next-btn:hover {
  background-color: #3a7bc8;
}

.next-btn:active {
  transform: translateY(1px);
}

.next-btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

	/* 底部格式 */
	.bottom-nav {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  background: white;
	  display: flex;
	  justify-content: space-around;
	  padding: 10px 0;
	  border-top: 1px solid #eee;
	}
	
	.nav-item {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  cursor: pointer;
	}
	
	.nav-icon {
	  font-size: 20px;
	  margin-bottom: 2px;
	}
	
	.nav-text {
	  font-size: 10px;
	  color: #666;
	}
	
	.nav-item.active .nav-text {
	  color: #1890ff;
	}
</style>